<template>
	<BaseContainer v-loading="loading">
		<aplid-base-crud
			@dialog-close="dialogClose"
			ref="crud"
			class="w-100"
			v-bind="{ ...baseConfig, ...$attrs }"
			:paramsObj="{ tableTemplateId: activeTemp.id ,delFlag:0}"
			:key="activeTemp.id"
		>
			<template v-slot:pageName>
				<div class="flex align-center gap-20 text-bold mr8">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							{{ activeTemp.templateName || '切换模板' }}
							<el-icon class="el-icon--right">
								<icon-down theme="outline" size="24" fill="#333" />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="(item, index) in tempList" :key="index" :command="item">{{ item.templateName }}</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<p>大屏配置</p>
				</div>
			</template>
			<template v-slot:itemData="{ row }">
				<div class="flex gap-20 flex-wrap f14">
					<p v-for="(v, k) in tableColumn" :key="k" style="text-wrap: wrap">
						<span class="text-black mr8">{{ v }}:</span>
						<span class="text-bold">{{ row.itemData[k] }}</span>
					</p>
				</div>
			</template>
			<template v-slot:addDialog="{ row, show }">
				<FormPage
					:tempConfig="tempConfig"
					:nowRowData="{ ...row, tableTemplateId: activeTemp.id, templateName: activeTemp.templateName, uniqueKey: activeTemp.uniqueKey }"
					v-if="show"
					@refresh="handleRefresh"
				></FormPage>
			</template>
			<template v-slot:editDialog="{ row, show }">
				<FormPage :tempConfig="tempConfig" :nowRowData="{...row,uniqueKey: activeTemp.uniqueKey}" v-if="show" @refresh="handleRefresh"></FormPage>
			</template>
			<template v-slot:detailDialog="{ row, show }">
				<DetailPage :tempConfig="tempConfig" :nowRowData="row" v-if="show" @refresh="handleRefresh"></DetailPage>
			</template>
			<template v-slot:templateDialog="{ row, show }">
				<TempAdmin pageName="大屏模板配置" :tableConfig="tempTableConfig" :formConfig="formConfig" :paramsObj="{ type: 7 }" v-if="show"></TempAdmin>
			</template>
		</aplid-base-crud>
	</BaseContainer>
</template>

<script setup>
import apiMod from '@/apiMod/index'
import { baseConfig,formConfig,tempTableConfig } from './config'
import FormPage from './form/index.vue'
import DetailPage from './detail/index.vue'
import TempAdmin from '@/views/safetySuper/hazardAccess/accessTable/index.vue'

const crud = ref(null)
const tableColumn = ref({})
const tempList = ref([])
const activeTemp = ref({})
const tempConfig = ref({})
const loading = ref(false)

const dialogClose = (whickComm) => {
  if(whickComm =='template') {
    getInitData()
  }
}
const handleRefresh = (query, visible = false) => {
	nextTick(() => {
		crud.value.refreshChange(query)
	})
}

const handleCommand = (command) => {
  loading.value = true 
	activeTemp.value = command
	apiMod.view_tableTemplate_id(command.id).then((res) => {
		const config = res.data?.jsonStr || {}
		tempConfig.value = config
		config.column?.map((item) => {
			tableColumn.value[item.prop] = item.label
		})
    loading.value = false
	})
}

const getInitData = () => {
	apiMod
		.view_tableTemplate_page({
			type: 7,
			pageParaPO:{"size":1000,"current":1}
		})
		.then((res) => {
			tempList.value = res.data.records
			handleCommand(tempList.value[0] || {})
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style lang="scss" scoped></style>
